import {Dimensions, ViewStyle, StyleSheet, TextStyle, Button} from 'react-native'
import {themeColors, definedColors} from './color'
import {Colors} from 'react-native/Libraries/NewAppScreen'

const DESIGN_WIDTH = 750
const DESIGN_HEIGHT = 1334

const windowWidth = Dimensions.get('window').width
const windowHeight = Dimensions.get('window').height

const designScale = DESIGN_WIDTH / windowWidth

function translateSize(length: number): number {
  return Math.floor(length / designScale)
}

interface CommonStyle {
  containerColumn: ViewStyle
  containerRow: ViewStyle
  shortBar: ViewStyle
  ringButton: ViewStyle
  tag: TextStyle
  redTag: TextStyle
  headerRight: ViewStyle
  headerFont: TextStyle
  titleTag: ViewStyle
  noDataWarn: TextStyle
  amountStyle: TextStyle
  successText: TextStyle
  loginOutContainer: TextStyle
  loginOutBtn: ViewStyle
  loginOutBtnText: TextStyle
  roomStyle: TextStyle
}

const commonStyle = StyleSheet.create<CommonStyle>({
  containerColumn: {
    width: '100%',
    flexDirection: 'column',
    backgroundColor: themeColors.pageBg,
  },
  containerRow: {
    width: '100%',
    flexDirection: 'row',
    flexWrap: 'nowrap',
    alignItems: 'center',
    backgroundColor: '#fff',
    paddingVertical: translateSize(40),
  },
  shortBar: {
    backgroundColor: themeColors.primary,
    width: translateSize(8),
    height: translateSize(28),
    borderRadius: translateSize(4),
  },
  ringButton: {
    backgroundColor: definedColors.white,
    borderColor: themeColors.primary,
    height: translateSize(40),
    borderRadius: translateSize(20),
    borderWidth: 1,
    flexDirection: 'row',
    alignItems: 'center',
  },
  tag: {
    paddingHorizontal: translateSize(15),
    paddingVertical: translateSize(5),
    borderColor: definedColors.seaGreen,
    borderWidth: 1,
    borderRadius: translateSize(4),
    fontSize: translateSize(24),
    color: definedColors.seaGreen,
  },
  redTag: {
    paddingHorizontal: translateSize(15),
    paddingVertical: translateSize(5),
    borderColor: definedColors.red1,
    borderWidth: 1,
    borderRadius: translateSize(4),
    fontSize: translateSize(24),
    color: definedColors.red1,
  },
  headerRight: {
    paddingHorizontal: translateSize(32),
    paddingVertical: translateSize(10),
  },
  headerFont: {
    fontSize: translateSize(32),
    color: definedColors.white,
  },
  titleTag: {
    paddingHorizontal: translateSize(20),
    paddingVertical: translateSize(5),
    borderRadius: translateSize(30),
    fontSize: translateSize(20),
    color: definedColors.white,
    backgroundColor: definedColors.orange,
  },
  noDataWarn: {
    color: definedColors.orange,
    textAlign: 'center',
  },
  amountStyle: {
    fontSize: translateSize(52),
    marginLeft: translateSize(30),
    marginTop: translateSize(20),
  },
  roomStyle: {
    fontSize: translateSize(32),
  },
  successText: {
    color: definedColors.gray33,
    textAlign: 'center',
  },
  loginOutContainer: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  loginOutBtn: {
    backgroundColor: definedColors.firebrick,
    marginTop: translateSize(200),
    width: '90%',
  },
  loginOutBtnText: {
    color: definedColors.white,
    fontSize: translateSize(34),
  },
})

export {commonStyle, translateSize, themeColors, definedColors}
